<template>
    <view class="comp-scroll-header-fixed">
		<view class="navBar">
		    <slot name="navBar"></slot>			
		</view>
		<!-- 头部占位 -->
		<view class="seize-seat" v-if="fixedTop" :style="{ height: (seizeHeight || seize)+'rpx'}"/>
		<view class="scroll-header" 
			:class="{'scroll-header-scroll': startScroll,'scroll-header-fixed': fixedTop}"
			:style="{'background': rgba(scrollTop),'padding-top': navHeight+'px','margin-top':-navHeight-fixedParams.forAlign+'px'} "
		>		
			<basic-status-bar v-if="fixedTop" />
			<view @click="clickLeft" class="nav-btns-left" v-if="fixedTop">
					<basic-icons color="#000000" name="icon9" size="40rpx" />
			</view>				
			<view class="scroll-header-search--wrap" 
			:class="{ fixed: fixedTop, scroll: startScroll }" 
			:style="{
				width: startScroll && !fixedTop ? 702 - scrollTop*fixedParams.speed + 'rpx': (fixedTop ? fixedParams.searchWidth : '702rpx'), //h5: '652rpx' : '702rpx' 小程序：
				left: startScroll && !fixedTop ? scrollTop + 'rpx': '70rpx'
				}"
			>
				<!-- 搜索bar -->
				<slot name="search"></slot>
			</view>
			<!-- 其他内容 -->
			<view class="page-padding">
			   <slot></slot>	
			</view>
		</view>		
	</view>
</template>

<script>
import sdk from 'sdk';
import ua from 'utils/ua'
export default {
	props: {
		scrollTop: { type: Number, default: 0 },
		seizeHeight: { type: Number, default: 0 },
	},
	data() {
		return {
			fixedTop: false,
			startScroll: false,
			navHeight:0,
			seize:0,
			fixedParams: {
				speed: 1,
				searchWidth: '652rpx',
				forAlign: 0
			}
		}
	},
	watch: {
		async scrollTop(n){
			if (n < 11) {
			   this.startScroll = false
			}
			if (n > 10) {
			   this.startScroll = true
			}
			if (n < 41) {
			   this.fixedTop = false
			}
			if (n > 40) {
				this.fixedTop = true
			}
		}
	},
	mounted(){
		this.searchFixedParams()
		sdk.getOffset('.navBar',null,this).then(res=>{
			this.navHeight = res.height
		})
		sdk.getOffset('.comp-scroll-header-fixed',null,this).then(res=>{
			this.seize = res.height
		})
	},
	methods: {
		clickLeft(){
			this.$emit('clickLeft')
		},
		rgba(scrollTop){
			return `rgba(246, 249, 253,${scrollTop/40})`
		},
		searchFixedParams(){
			if(ua.isMP){
				this.fixedParams = {
					speed: 5,
					searchWidth: '476rpx',
					forAlign: 4
				}				
			}
		},
	}	
}
</script>
<style lang="less">
.pagePadding(){
	padding: 0rpx @page_horizonal_margin 0;
}
.seize-seat{
		position: relative;
		// height: 240rpx;
  }
.scroll-header{	
	.page-padding{
		.pagePadding
	}
	&.scroll-header-scroll{
		position:relative;
		z-index: 9999;	
		background-color:transparent;		
	}
	&.scroll-header-fixed{
		position: fixed;
		top:0rpx;
		left:0rpx;
		right:0rpx;
		z-index: 9999;
		// height:170rpx;
		height:auto;
		background-color: @bg_color;
	}
	.nav-btns-left{
		position: absolute;
		left:0;
		padding: 0rpx 12rpx;
		width: 50rpx;
		line-height:100rpx;
	}
	.scroll-header-search--wrap{
		overflow: hidden;
		width: 750rpx;	
		padding-left: 24rpx; 
		&.scroll{
			position: relative;
			right: 0;
		}		
		&.fixed{
			position: relative;
			right: 0;
			left:50rpx;
			padding-left: 0;
			width: 700rpx;
		}
	}
}
</style>